<template>
  <div>
    <el-card>
      <el-alert
        title="添加商品信息"
        type="info"
        center
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-steps
        :space="200"
        :active="activestepsName - 0"
        finish-status="success"
        align-center
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form
        :model="addGoodsFrom"
        :rules="addGoodsFromRules"
        ref="addGoodsFromRef"
        label-width="100px"
        label-position="top"
      >
        <el-tabs
          :tab-position="'left'"
          v-model="activestepsName"
          @tab-click="handleClick"
          :before-leave="beforeTabsleave"
        >
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addGoodsFrom.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addGoodsFrom.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addGoodsFrom.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addGoodsFrom.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <!-- 级联选择器 -->
              <el-cascader
                v-model="addGoodsFrom.goods_cat"
                :options="options"
                :props="props"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <el-form-item
              :label="item.attr_name"
              v-for="(item, key) in manyGoodsList"
              :key="key"
            >
              <el-checkbox-group v-model="item.attr_vals">
                <el-checkbox
                  :label="it"
                  v-for="(it, k) in item.attr_vals"
                  :key="k"
                  border
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <el-form-item
              :label="item.attr_name"
              v-for="(item, key) in onlyGoodsList"
              :key="key"
            >
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="3"
            ><el-upload
              action="https://www.liulongbin.top:8888/api/private/v1/upload"
              list-type="picture"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :headers="handleHeaders"
              :on-success="handleSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <!-- 富文本编辑器 -->
            <quill-editor v-model="addGoodsFrom.goods_introduce" />
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <el-dialog title="提示" :visible.sync="previewVisible" width="50%">
      <img :src="previewPath" alt="" class="img" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      activestepsName: "0",
      //   添加的表单
      addGoodsFrom: {
        goods_name: "",
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        goods_introduce: "",
        goods_cat: [],
        pics: [],
      },
      //   验证规则
      addGoodsFromRules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, message: "请选择商品分类", trigger: "blur" },
        ],
      },
      //   级联选择器配置规则
      props: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
        expandTrigger: "hover",
      },
      //   级联选择器数据源
      options: [],
      manyGoodsList: [],
      onlyGoodsList: [],
      handleHeaders: {
        Authorization: window.sessionStorage.getItem("token"),
      },
      previewPath: "",
      previewVisible: false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    handleClick() {
      console.log(this.activestepsName);
      if (this.activestepsName === "1") {
        this.$http
          .get(`categories/${this.addGoodsFrom.goods_cat[2]}/attributes`, {
            params: {
              sel: "many",
            },
          })
          .then((res) => {
            // console.log(res);
            if (res.data.meta.status !== 200)
              this.$message.error("动态参数获取失败");
            res.data.data.forEach((item) => {
              item.attr_vals =
                item.attr_vals.length === 0 ? [] : item.attr_vals.split(" ");
            });
            // console.log(res);
            this.manyGoodsList = res.data.data;
          });
      } else if (this.activestepsName === "2") {
        this.$http
          .get(`categories/${this.addGoodsFrom.goods_cat[2]}/attributes`, {
            params: {
              sel: "only",
            },
          })
          .then((res) => {
            // console.log(res);
            if (res.data.meta.status !== 200)
              this.$message.error("静态属性获取失败");
            // res.data.data.forEach((item) => {
            //   item.attr_vals =
            //     item.attr_vals.length === 0 ? [] : item.attr_vals.split(" ");
            // });
            console.log(res);
            this.onlyGoodsList = res.data.data;
          });
      }
    },
    getCateOptions() {
      this.$http.get("categories").then((res) => {
        if (res.data.meta.status !== 200)
          return this.$message.error("分类数据获取失败");
        this.options = res.data.data;
      });
    },
    handleChange() {
      console.log(this.addGoodsFrom.goods_cat);
      if (this.addGoodsFrom.goods_cat.length != 3)
        return (
          this.$message.error("只能选择三级分类"),
          (this.addGoodsFrom.goods_cat = [])
        );
    },
    // 标签切换前执行的钩子
    beforeTabsleave(activeName, oldActiveName) {
      if (oldActiveName === "0" && this.addGoodsFrom.goods_cat.length != 3) {
        return this.$message.error("请选择三级分类"), false;
      }
    },
    handleSuccess(response) {
      const picInfo = { pic: response.data.tmp_path };
      this.addGoodsFrom.pics.push(picInfo);
      console.log(this.addGoodsFrom);
    },
    handleRemove(file) {
      const filePath = file.response.data.tmp_path;
      const i = this.addGoodsFrom.pics.findIndex((x) => {
        x.pic == filePath;
      });
      this.addGoodsFrom.pics.splice(i, 1);
      console.log(this.addGoodsFrom);
    },
    handlePreview(file) {
      this.previewPath = file.response.data.url;
      this.previewVisible = true;
    },
  },
  // 以下是生命周期钩子 注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getCateOptions();
  },
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.el-steps {
  margin: 15px 0;
}
.el-step__title {
  font-size: 12px;
}
.el-checkbox {
  margin: 0 5px 0 0 !important;
}
.img {
  width: 100%;
}
.ql-container {
  height: 400px !important;
}
</style>